<template>
  <div class="bid">
    <div class="bid-search">
      <el-form :model="searchForm" label-width="100px">
        <el-row :gutter="20" style="height: 60px">
          <el-col :span="6">
            <el-form-item label="部门：">
              <el-select v-model.trim="searchForm.department" placeholder="请选择部门" @change="getObjectList" :disabled="userInfo === '1'">
                <el-option
                  v-for="item in department"
                  :key="item.id"
                  :label="item.label"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="助理：">
              <el-input v-model.trim="searchForm.assistant"  placeholder="请输入助理姓名"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目编号：">
              <el-input v-model.trim="searchForm.pid"  placeholder="请输入项目编号"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名称：">
              <el-input v-model.trim="searchForm.pname"  placeholder="请输入项目名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="项目进度：">
              <el-select v-model.trim="searchForm.progress" placeholder="请选择项目进度" @change="getObjectList">
                <el-option
                        v-for="item in progress"
                        :key="item.id"
                        :label="item.label"
                        :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预定标时间：">
              <el-date-picker
                      v-model="queryStime"
                      value-format="YYYY-MM-DD"
                      type="daterange"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                      @blur="getStime()"
                      clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="3" :offset="1">
            <el-button type="primary" @click="getObjectList" @keydown.enter="keyDown()">搜索</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>

    </div>
    <div class="bid-buttons" v-if="userInfo === '1'">
      <el-button type="primary" @click="addProject">新增项目</el-button>
    </div>
    <div class="bid-content">
      <el-table :data="tableList" border style="width: 100%" stripe max-height="618" show-overflow-tooltip>
        <el-table-column v-for="(item, index) in tableHeaderList" :key="item.id" align="center" :prop="item.prop" :label="item.label" :width="item.width" :fixed="index === 0 ? 'left' : index === tableHeaderList.length - 1  ? 'right' : false">
          <template #default="scope" v-if="item.prop === 'operate'">
            <div @click="itemButtonClick($event, scope.row)">
              <span class="button" v-if="userInfo === '1'">编辑项目</span>
              <span class="button" id="bid" v-if="userInfo === '1' || userInfo === '2' || userInfo === '3'">投标信息</span>
              <span class="button" v-if="userInfo === '3'">预定标</span>
              <span class="button" id="calibrate" v-if="userInfo === '3'">正式定标</span>
              <span class="button" id="placeFile" v-if="userInfo === '4'">归档</span>
              <span class="button" id="grounding" v-if="userInfo === '4'">上架</span>
              <span id="detail" class="button">查看详情</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bid-bottom" v-if="total > 0">
      <el-pagination
        v-model:current-page="pageInfo.current"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog v-model="dialogVisible" :title="diaInfo.title" width="30%" :before-close="handleClose">
      <el-form :model="placeFileForm" label-width="120px">
        <el-form-item label="归档时间：" v-if="diaInfo.flag === 'file'">
          <el-date-picker
            v-model="placeFileForm.info.gdtime"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="请选择归档时间"
          />
        </el-form-item>
        <el-form-item label="档案号：" v-if="diaInfo.flag === 'grounding'">
          <el-input v-model="placeFileForm.info.sjnum" />
        </el-form-item>
        <el-form-item label="上架时间：" v-if="diaInfo.flag === 'grounding'" style="margin-top: 20px;">
          <el-date-picker
            v-model="placeFileForm.info.sjtime"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="请选择上架时间"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose"> 取消 </el-button>
          <el-button type="primary" @click="confirm"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { department,progress } from '@/utils/dict.js'
import pageApi from '@/api/page.js'
import { userStore } from '@/store/user.js'
import { filterStore } from '@/store/filter.js'
import { reactive } from 'vue'
const router = useRouter()
const store = userStore()
const filstore1 = filterStore()
const { userInfo,ud } = storeToRefs(store)
const { fil,cur } = storeToRefs(filstore1)
let searchForm = reactive({
  department: '',
  pid: '',
  pname: '',
  assistant: '',
  progress: '',
  queryStime1:'',
  queryStime2:''
})
let pageInfo = reactive({
  current: 1,
  pageSize: 10
})
let queryStime = ref([]);
const total = ref(20)
const tableHeaderList = ref([
  {
    id: 0,
    prop: 'pid',
    label: '项目编号',
    width: 225
  },
  {
    id: 1,
    prop: 'department',
    label: '部门',
    width: 90
  },
  {
    id: 2,
    prop: 'principal',
    label: '负责人',
    width: 90
  },
  {
    id: 3,
    prop: 'assistant',
    label: '助理',
    width: 90
  },
  {
    id: 4,
    prop: 'pname',
    label: '项目名称',
    width: 400
  },
  {
    id: 5,
    prop: 'progress',
    label: '项目进度',
    width: 100
  },
  {
    id: 6,
    prop: 'client',
    label: '委托单位',
    width: 130
  },
  {
    id: 7,
    prop: 'bidmethod',
    label: '组织方式',
    width: 100
  },
  {
    id: 8,
    prop: 'bidcategory',
    label: '招标类别',
    width: 90
  },
  {
    id: 9,
    prop: 'opentime',
    label: '开标时间',
    width: 120
  },
  {
    id: 10,
    prop: 'wincompany',
    label: '中标单位',
    width: 180
  },
  {
    id: 11,
    prop: 'winprice',
    label: '中标价(元)',
    width: 180
  },
  {
    id: 12,
    prop: 'stime',
    label: '预定标时间',
    width: 180
  },
  {
    id: 13,
    prop: 'ftime',
    label: '正式定标时间',
    width: 180
  },
  {
    id: 14,
    prop: 'gdtime',
    label: '归档时间',
    width: 180
  },
  {
    id: 15,
    prop: 'sjtime',
    label: '上架时间',
    width: 180
  },
  {
    id: 16,
    prop: 'remark',
    label: '备注',
    width: 180
  },
  {
    id: 17,
    prop: 'operate',
    label: '操作',
    width: 300
  }
])
const tableList = ref([{}])
const dialogVisible = ref(false)

const diaInfo = reactive({
  title: '',
  flag: ''
})

const placeFileForm = reactive({
  info: {
    id: '',
    gdtime: '',
    sjnum: '',
    sjtime: ''
  }
})

onMounted(() => {
  getObjectList()
  //绑定监听事件
  window.addEventListener('keydown', keyDown)
})
onUnmounted(() => {
  //销毁事件
  window.removeEventListener('keydown', keyDown, false)
});
//搜索
const getObjectList = async () => {
  searchForm = fil.value;
  if (queryStime.value.length == 0 && fil.value.queryStime1 != '' && fil.value.queryStime2 != '') {
    queryStime.value.push(fil.value.queryStime1)
    queryStime.value.push(fil.value.queryStime2)
  }
  pageInfo.current = cur.value.current;
  pageInfo.pageSize = cur.value.pageSize;
  //招标部只能查看自己的项目
  if (userInfo.value === '1') {
    searchForm.department=ud.value;
  }
  const res = await pageApi.getObjectList({ ...searchForm, ...pageInfo });
  if (res.code == '0') {
    tableList.value = res.data.projects
    total.value = res.data.total
  }
}
//点击回车键搜索
const keyDown = (e) => {
  if (e.keyCode == 13) {
    getObjectList()
  }
}

// 新增项目
const addProject = () => {
  router.push({
    path: '/data-center/bid/add',
    query: {bidFlag: false}
  })
}

// 分页切换
const handleSizeChange = (val) => {
  pageInfo.pageSize = val
  filstore1.cur = pageInfo;
  getObjectList()
}
const handleCurrentChange = (val) => {
  pageInfo.current = val
  filstore1.cur = pageInfo;
  getObjectList()
}

// 重置
const reset = () => {
  for (let key in searchForm) {
    searchForm[key] = ''
  }
  queryStime.value = [];
  pageInfo.current = 1
  pageInfo.pageSize = 10
  getObjectList()
}

// 表格按钮
const itemButtonClick = (event, item) => {
  let path = ''
  let params = item.id
  filstore1.fil = searchForm;
  if (event.target.id === 'detail') {
    path = '/data-center/bid/detail'
  } else if (event.target.id === 'placeFile') {
    dialogVisible.value = true
    diaInfo.title = '归档'
    diaInfo.flag = 'file'
    placeFileForm.info.id = item.id
  } else if (event.target.id === 'grounding') {
    dialogVisible.value = true
    diaInfo.title = '上架'
    diaInfo.flag = 'grounding'
    placeFileForm.info.id = item.id
  } else {
    path = '/data-center/bid/add'
  }
  router.push({
    path,
    query: {
      id: params,
      calibrateFlag: event.target.id === 'calibrate' ? true : false,
      bidFlag: event.target.id === 'bid' ? true : false,
    }
  })
}

// 取消 
const handleClose = () => {
  dialogVisible.value = false
  for (let key in placeFileForm.info) {
    placeFileForm.info[key] = ''
  }
}

// 确定
const confirm = async () => {
  let res = null
  if (diaInfo.flag === 'file') {
    res = await pageApi.placeFile(placeFileForm.info)
  } else if (diaInfo.flag === 'grounding') {
    res = await pageApi.grounding(placeFileForm.info)
  }
  handleClose()
  getObjectList()
}
//获取预定标时间
const getStime = () => {
  if (queryStime.value.length > 0) {
    fil.value.queryStime1=queryStime.value[0];
    fil.value.queryStime2=queryStime.value[1];
    getObjectList()
  }
};

</script>

<style scoped lang="scss">
.bid-search {
  border-radius: 0.06rem;
  background: #ffffff;
  padding: 0.16rem;
  .el-button {
    width: 0.8rem;
    height: 0.4rem;
    font-size: 0.16rem;
  }
}
.bid-buttons {
  margin-top: 0.16rem;
  .el-button {
    width: 1rem;
    height: 0.4rem;
    font-size: 0.16rem;
  }
}
.bid-content {
  margin: 0.16rem 0;
  .el-table {
    margin-bottom: 0.16rem;
  }
}
.bid-bottom {
  display: flex;
  justify-content: flex-end;
}
:deep(.el-form) {
  .el-form-item {
    margin: 0;
    .el-select, .el-date-editor {
      width: 100%;
    }
    .el-form-item__label {
      padding: 0;
      color: #333;
      font-size: 0.16rem;
      line-height: 0.38rem;
    }
    .el-input__inner {
      color: #333333;
      height: 0.36rem;
      line-height: 0.36rem;
      font-size: 0.16rem;
    }
  }
}
:deep(.el-table) {
  margin-top: 0.16rem;
  .el-table__header {
    font-size: 0.16rem;
    thead {
      color: #333333;
    }
  }
  .el-table__cell {
    padding: 0.12rem 0;
    font-size: 0.16rem;
    color: #333333;
  }
  .button {
    display: inline-block;
    margin: 0 0.05rem;
    cursor: pointer;
    color: #409eff;
  }
}
</style>
